<template>
  <div class="taskDistributionSituationEchart" style="height: 368px"></div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
export default {
  mixins: [resize],
  props: {
    type: {
      type: String,
      default: "1",
    },
    chartData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      this.chart.on("click", function (params) {
        console.log(params);
        // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
      });
    },
    setOptions(data) {
      let count = 0;
      this.chartData.forEach((item) => {
        count += item.value;
      });
      this.chart.setOption({
        title: {
          text: `相关状态的任务数 : ${2}`,
          left: 50,
          top: 50,
          textStyle: {
            color: "#333",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.name +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        legend: {
          //   type: "scroll",
          orient: "vartical",
          top: "90",
          left: "50",
          itemGap: 20,
          align: "left",
          itemWidth: 40,
          itemHeight: 14,
          textStyle: {
            color: "#8C8C8C",
            align: "right",
            width: 85,
            padding: [0, 0, 0, -150],
          },
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["60%", "50%"],
            radius: ["30%", "65%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              show: true,
              color: "RGB(60,101,129)",
              formatter: function (params) {
                return (
                  params.name +
                  "：" +
                  ((params.value / count) * 100).toFixed(2) +
                  "%"
                );
              },
            },
            labelLine: {
              length: 30,
              length2: 10,
              lineStyle: {
                width: 1,
              },
            },
            data,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>